import React, { useEffect, useState } from 'react';
import '@/views/Index/QuestionsEdit/QuestionsEdit.scss'
import { useNavigate,  } from "react-router-dom";
import Nav from '../../../components/Nav/Nav'
import service from '../../../api/index'
import { Form, Input, Button, Cascader, Radio } from 'antd';
import { createBrowserHistory } from "history";
import  getDate  from "../../../utils/getDate";
import { useSelector } from 'react-redux';


interface Props {

}

function QuestionsEdit(props: Props) {

    let navigator = useNavigate()
    let id =useSelector((state:any)=>state.question_id)

    let [form] = Form.useForm()

    let [data, setData] = useState({})

    useEffect(() => {
        editData({ id: id })
    }, [])

    // 数据回显
    let editData = async (payload = {}) => {
        // console.log(1,params);

        let res = await service.dy.questions_search(payload)
        console.log(res.data[0]);
        // setData(res.data[0])
        // 回显表单内容
        form.setFieldsValue(
            {
                category: res.data[0].category,
                question: res.data[0].question,
                A: res.data[0].A,
                B: res.data[0].B,
                C: res.data[0].C,
                D: res.data[0].D,
                answer: res.data[0].answer,
                analysis: res.data[0].analysis
            }
        );
    }

    const { TextArea } = Input;

    let history = createBrowserHistory()


    let onFinish = async (values: any) => {
        values = { type: "单选题", id: id, edittime: getDate(), ...values }
        console.log(values = { type: "单选题", id: id, edittime: getDate(), ...values });

        let res = await service.dy.questions_update(values)
        navigator('/index/questions')
    }

    return (
        <div className='questionsedit'>
            <Nav />
            <div className="list">
                <div className="title">
                    基础信息
                </div>
                <Form
                    className='form'
                    form={form}
                    labelCol={{ span: 4 }}
                    wrapperCol={{ span: 14 }}
                    layout="horizontal"
                    onFinish={onFinish}
                >
                    <div className="top">
                        <Form.Item label="题目分类" name="category" rules={[{ required: true }]}>
                            <Cascader
                                options={[
                                    {
                                        value: '一级分类A',
                                        label: '一级分类A',
                                        children: [
                                            {
                                                value: '二级分类A', label: '二级分类A', children: [
                                                    { value: '三级分类A', label: '三级分类A' },
                                                    { value: '三级分类B', label: '三级分类B' },
                                                ]
                                            },
                                            {
                                                value: '二级分类B', label: '二级分类B', children: [
                                                    { value: '三级分类A', label: '三级分类A' },
                                                    { value: '三级分类B', label: '三级分类B' },
                                                ]
                                            },
                                        ],
                                    },
                                    {
                                        value: '一级分类B',
                                        label: '一级分类B',
                                        children: [
                                            {
                                                value: '二级分类A', label: '二级分类A', children: [
                                                    { value: '三级分类A', label: '三级分类A' },
                                                    { value: '三级分类B', label: '三级分类B' },
                                                ]
                                            },
                                            {
                                                value: '二级分类B', label: '二级分类B', children: [
                                                    { value: '三级分类A', label: '三级分类A' },
                                                    { value: '三级分类B', label: '三级分类B' },
                                                ]
                                            },
                                        ],
                                    },

                                ]}
                            />

                        </Form.Item>
                        <a href="#" style={{marginLeft:'130px'}}>新建分类</a>
                    </div>

                    <Form.Item label="题干" name="question" rules={[{ required: true }]}>
                        <TextArea rows={4} />
                    </Form.Item>
                    <Form.Item label="选项A" name="A" rules={[{ required: true }]}>
                        <TextArea rows={4} />
                    </Form.Item>
                    <Form.Item label="选项B" name="B" rules={[{ required: true }]}>
                        <TextArea rows={4} />
                    </Form.Item>
                    <Form.Item label="选项C" name="C" rules={[{ required: true }]}>
                        <TextArea rows={4} />
                    </Form.Item>
                    <Form.Item label="选项D" name="D" rules={[{ required: true }]}>
                        <TextArea rows={4} />
                    </Form.Item>
                    <a href="#" style={{marginLeft:'130px'}}>+ 新增选项</a>
                    <Form.Item label="正确答案" name="answer" rules={[{ required: true }]}>
                        <Radio.Group size="small">
                            <Radio.Button value="A">A</Radio.Button>
                            <Radio.Button value="B">B</Radio.Button>
                            <Radio.Button value="C">C</Radio.Button>
                            <Radio.Button value="D">D</Radio.Button>
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item label="解析" name="analysis">
                        <TextArea style={{ marginBottom: '20px' }} rows={4} />
                    </Form.Item>
                    <Form.Item>
                        <Button className='submit' type="primary" htmlType="submit">
                            提交
                        </Button>
                        <Button className='back' htmlType="button"
                            onClick={() => { history.go(-1) }}
                        >
                            返回
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        </div>
    );
}

export default QuestionsEdit;